<template>
  <section class="consult" >
    <div class="top">
      <img class="banner" src="../../../assets/images/franchise.jpg"/>
      <div class="classify" ref="wrapper">
        <ul class="content">
          <router-link
            tag="li"
            v-for="item of classify"
            :key="item.id"
            active-class="active"
            :to="{path: item.path}"
          >
            <p><span>{{item.name}}</span></p>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <keep-alive>
        <router-view :key="$route.fullPath"/>
      </keep-alive>
    </div>
  </section>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'Consult',
  data () {
    return {
      classify: [
        {
          name: '加盟情报',
          id: 0,
          path: 'join'
        },
        {
          name: '成功案例',
          id: 1,
          path: 'successCase'
        },
        {
          name: '常见问题',
          id: 2,
          path: 'problem'
        },
        {
          name: '加盟咨询',
          id: 3,
          path: 'consultSon'
        },
        {
          name: '加盟列表',
          id: 4,
          path: 'term'
        }
      ],
      current: 0,
      successSon: [],
      problem: [],
      termTable: []
    }
  },
  created () {
    this.getConsultData()
  },
  mounted () {
    // 使用ref配合refs获取dom元素
    this.$nextTick(() => {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          startX: 0,
          click: true,
          scrollX: true,
          scrollY: false
        })
      } else {
        this.scroll.refresh()
      }
    })
  },
  methods: {
    getConsultData () {
      this.axios.get('./consultItem')
        .then((res) => {
          console.log(res)
          let data = res.data
          this.successSon = data[0].successCase
          this.problem = data[1].problem
          this.$store.commit('getSuccessItem', this.successSon)
          this.$store.commit('getProblemItem', this.problem)
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .consult
    .top
      position fixed
      top 0
      left 0
      width 100%
      z-index 999
      .banner
        width 100%
        height auto
      .classify
        background #fff!important
        display: flex
        overflow-y: hidden
        overflow-x: scroll
        .content
          display: flex
          border-bottom 1px solid #f5f5f5
          padding 1px 0
          li
            width 158px
            text-align center
            p
              span
                font-size 26px
                display inline-block
                padding 29px 0 25px
                color #7d7d7d
            .active
              border-bottom 6px solid #E0033D
              color #E0033D
        .active p span
          border-bottom 6px solid #E0033D
          color #E0033D!important
    .bottom
      margin-top 286px
</style>
